<template>
  <Space>
      <el-button type="text" @click="editClick" class="btn">
          <span style="display: flex;">
              <img class="icon" src="@/assets/image/operation/editIcon.png" alt="">
              <span class="edit-txt">编辑</span>
          </span>
      </el-button>
      <el-button type="text" @click="onDetailClick" class="btn">
          <span style="display: flex;">
              <img class="icon" src="@/assets/image/operation/detailIcon.png" alt="">
              <span class="detail-txt">详情</span>
          </span>
      </el-button>
  </Space>
</template>
<style lang="scss" scoped>
.btn {
  display: flex;
  align-content: center;
}
.icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
.detail-txt {
  color: #FF985E;
  font-size: 14px;
  line-height: 16px;
  height: 14px;
}
.detail-txt {
  color: #00E0FF;
  font-size: 14px;
  line-height: 16px;
  height: 14px;
}
</style>
<script>
  import FormModal from './FormModal.vue'
  export default {
      name: 'Operation',
      props: {
          rowData: {
              type: Object,
              default: () => {
                  return {}
              },
          },
      },
      inject: ['tableRoot'],
      methods: {
          editClick() {
              new this.$pageModal(
                  FormModal,
                  {
                      props: {
                          title: '编辑',
                          rowData: this.$props.rowData,
                      },
                  },
                  (result) => {
                      if (result) {
                          this.tableRoot.onSearchChange()
                      }
                  }
              )
          },
          onDetailClick() {
              new this.$pageModal(
                  FormModal,
                  {
                      props: {
                          title: '详情',
                          rowData: this.$props.rowData,
                      },
                  },
                  (result) => {
                      if (result) {
                          this.tableRoot.onSearchChange()
                      }
                  }
              )
          },
      },
  }
</script>
